<li class="po-tree-view-item">
  <po-tree-view-item-header
    [p-components-size]="componentsSize"
    [p-item]="item"
    [p-selectable]="selectable"
    [p-single-select]="singleSelect"
    [p-selected-value]="selectedValue"
    (p-expanded)="onClick($event)"
    (p-selected)="onSelect(item)"
  >
  </po-tree-view-item-header>

  @if (hasSubItems) {
    <ul class="po-tree-view-item-group">
      @if (item.expanded) {
        <div @toggleBody>
          @for (subItem of item.subItems; track trackByFunction($index)) {
            <po-tree-view-item
              [p-components-size]="componentsSize"
              [p-item]="subItem"
              [p-selectable]="selectable"
              [p-single-select]="singleSelect"
              [p-selected-value]="selectedValue"
            >
            </po-tree-view-item>
          }
        </div>
      }
    </ul>
  }
</li>
